
<ion-tabs>
  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="ilp">
      <ion-icon [src]="'assets/icon/category-premium.svg'"></ion-icon>
      <ion-label>ILP</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="gold">
      <ion-icon [src]="'assets/icon/stat-gold.svg'"></ion-icon>
      <ion-label>Gold</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="astral-gate">
      <ion-icon [src]="'assets/icon/category-astralgate.svg'"></ion-icon>
      <ion-label>Astral Gate</ion-label>

      <!-- tabs must request data like this or it doesn't work -->
      <ng-container *ngIf="(gameService.player$ | async) as player">
        <ion-badge *ngIf="player.$premiumData && uiService.canDoPremium(player)" color="secondary">Free Roll</ion-badge>
      </ng-container>
    </ion-tab-button>

    <ion-tab-button tab="festivals">
      <ion-icon [src]="'assets/icon/category-festivals.svg'"></ion-icon>
      <ion-label>Festivals</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
